<template>
  <div class="h-full flex flex-col">
    <a-card>
      <div class="flex items-center">
        <a-button class="ml-12" type="primary" @click="router.go(-1)">返回</a-button>
        <div class="ml-12 mt-2 mb-2">
          <div class="flex">
            <LabelValue label="项目名称" :value="rowData.mc" width="220" />
            <LabelValue label="条形码" :value="rowData.barCode" width="220" />
            <LabelValue label="商品分类" :value="rowData.categroyName" width="220" />
            <LabelValue label="规格" :value="rowData.gg" width="220" />
            <LabelValue label="创建人" :value="rowData.createUser" width="220" />
            <LabelValue label="创建时间" :value="rowData.createTime" width="220" />
          </div>
          <div class="flex mt-4">
            <LabelValue label="厂家" :value="rowData.manufacturers" width="440" />
            <LabelValue label="产地" :value="rowData.origin" width="440" />
            <LabelValue label="备注" :value="rowData.mome" width="200" />
          </div>
        </div>
      </div>
    </a-card>
    <a-card class="mt-2 flex-1 overflow-y-auto">
      <div class="flex">
        <a-form ref="formRef" class="form-style-flex" :model="formState" :colon="false" :label-col="{ style: { width: '70px' } }">
          <a-form-item name="zjm" class="ml-4">
            <a-input v-model:value="formState.zjm" class="w-64" placeholder="型号/条码" @press-enter="getData()" />
          </a-form-item>
        </a-form>
        <a-button type="primary" class="mb-3 ml-2" @click="getData">检索</a-button>
      </div>
      <BaseTable :loading="loading" column-code="000444" fill :data-source="tableData" bordered row-key="id" :pagination="false">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" size="small" @click="onPrint(record)">打印</a-button>
          </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>
<script setup>
import { watch } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { post } from '@/utils/request'

const router = useRouter()
const rowData = ref({})
const id = ref(router.currentRoute.value.query.id || '')
const formState = ref({
  zjm: ''
})
const tableData = ref([])
// const page = ref({ total: 0, current: 1, pageSize: 10 })
const getInfo = async () => {
  const { code, data, msg } = await post('/operation/opex/getOoProductList', {
    splb: 60,
    zjm: id.value
  })
  if (code !== 0) return message.error(msg)
  if (data && data.length > 0) {
    rowData.value = data[0]
    getData()
  } else {
    message.error('暂无数据')
    rowData.value = {}
  }
}
const onPrint = async (record) => {
  const { code, data, msg } = await post('/operation/opex/printDictOoProductSku', {
    productId: record.productId,
    skuid: record.skuid
  })
  if (code !== 0) return message.error(msg || '打印失败')
  window.openExe?.rpt(data)
}
const getData = async () => {
  const { code, data, msg } = await post('/operation/opex/getOoProductSku', { id: rowData.value.id, ...formState.value })
  if (code !== 0) return message.error(msg)
  if (data?.list && data?.list.length > 0) {
    tableData.value = data.list
  } else {
    tableData.value = []
  }
}
watch(
  () => id.value,
  (val) => {
    if (val) {
      getInfo()
      // getData()
    }
  },
  { deep: true, immediate: true }
)
</script>
<style scoped>
table,
th,
td {
  border: 1px solid #d7d7d7;
  border-collapse: collapse;
}
th {
  font-weight: normal;
}
th,
td {
  height: 38px;
  padding: 4px;
  text-align: center;
}
</style>
